// pages/herolist/herolist.js
var numCount = 5;
var numSlot = 5;
var mW = 160  ;
var mCenter = mW/2;
var mAngle = Math.PI*2/numCount;
var mRadius = mCenter - 30;
var radCtx = wx.createCanvasContext("radarCanvas");
Page({
  /**
   * 页面的初始数据
   */
  data: {
    stepText:5,
    chanelArray1:[["统率",50],["武力",72],["智力",91],["政治",85],["魅力",85]]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    var sourceData1 = this.data.chanelArray1
    //调用
    this.drawEdge() //画六边形
    //this.drawArcEdge() //画圆
    this.drawLinePoint()
    //设置数据
    this.drawRegion(sourceData1,'rgba(255, 0, 0, 0.5)') //第一个人的
    //设置文本数据
    this.drawTextCans(sourceData1)
    //设置节点
    this.drawCircle(sourceData1,'red')
    //开始绘制
    radCtx.draw()
  },
  // 绘制6条边
  drawEdge: function(){
    radCtx.setStrokeStyle("white")
    radCtx.setLineWidth(1)  //设置线宽
    for (var i = 0; i < numSlot; i++) {
      //计算半径
      radCtx.beginPath()
      var rdius = mRadius / numSlot * (i + 1)
      //画6条线段
      for (var j = 0; j < numCount; j++) {
        //坐标
        var x = mCenter + rdius * Math.cos((mAngle) * j + Math.PI/3.3);
        var y = mCenter + rdius * Math.sin((mAngle) * j + Math.PI/3.3);
        radCtx.lineTo(x, y);
      }
      radCtx.closePath()
      radCtx.stroke()
    } 
  },
  // 绘制连接点
  drawLinePoint:function(){
    radCtx.beginPath();
    for (var k = 0; k < numCount; k++) {
      var x = mCenter + mRadius * Math.cos((mAngle) * k + Math.PI/3.3);
      var y = mCenter + mRadius * Math.sin((mAngle) * k + Math.PI/3.3);

      radCtx.moveTo(mCenter, mCenter);
      radCtx.lineTo(x, y);
    }
    radCtx.stroke();
  },
  //绘制数据区域(数据和填充颜色)
  drawRegion: function (mData,color){
      
      radCtx.beginPath();
      for (var m = 0; m < numCount; m++){
      var x = mCenter + mRadius * Math.cos((mAngle) * m + Math.PI/3.3) * mData[m][1] / 100;
      var y = mCenter + mRadius * Math.sin((mAngle) * m + Math.PI/3.3) * mData[m][1] / 100;

      radCtx.lineTo(x, y);
      }
      radCtx.closePath();
      radCtx.setFillStyle(color)
      radCtx.fill();
    },

    //绘制文字
    drawTextCans: function (mData){

      radCtx.setFillStyle("white")
      radCtx.font = 'bold 12px cursive'  //设置字体
      for (var n = 0; n < numCount; n++) {
        var x = mCenter + mRadius * Math.cos(mAngle * n + Math.PI/3.3);
        var y = mCenter + mRadius * Math.sin(mAngle * n + Math.PI/3.3);
        // radCtx.fillText(mData[n][0], x, y);
        //通过不同的位置，调整文本的显示位置
        if ((mAngle * n + Math.PI/3.3) * n >= 0 && (mAngle * n + Math.PI/3.3) <= Math.PI / 2) {
          radCtx.fillText(mData[n][0], x+5, y+5);
        } else if ((mAngle * n + Math.PI/3.3) * n > Math.PI / 2 && (mAngle * n + Math.PI/3.3) <= Math.PI) {
          radCtx.fillText(mData[n][0], x - radCtx.measureText(mData[n][0]).width-7, y+5);
        } else if ((mAngle * n + Math.PI/3.3) > Math.PI && (mAngle * n + Math.PI/3.3) <= Math.PI * 3 / 2) {
          radCtx.fillText(mData[n][0], x - radCtx.measureText(mData[n][0]).width-5, y);
        } else {
          radCtx.fillText(mData[n][0], x+7, y+2);
        }

      }
    },
    //画点
    drawCircle: function(mData,color){
       var r = 3; //设置节点小圆点的半径
       for(var i = 0; i<numCount; i ++){
          var x = mCenter + mRadius * Math.cos(mAngle * i + Math.PI/3.3) * mData[i][1] / 100;
          var y = mCenter + mRadius * Math.sin(mAngle * i + Math.PI/3.3) * mData[i][1] / 100;

          radCtx.beginPath();
          radCtx.arc(x, y, r, 0, Math.PI * 2);
          radCtx.fillStyle = color;
          radCtx.fill();
        }

      },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})